<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表页</title>
  <link rel="stylesheet" href="/css/list.css">
</head>

<body>
  <header class="header"></header>
  <!-- 产品信息 -->
  <nav>
    <div class="nav-top"></div>
    <div class="nav-bottom">
      <ul id="tabList">

      </ul>
      <script type="text/html" id="tabListTemplate">
        {{each list tab}}
        <li><a href="/html/list.html?id={{tab.id}}">{{tab.name}}</a></li>
        {{/each}}
      </script>
    </div>
  </nav>
  <!-- 列表页 -->
  <main>
    <!-- 选择列表以及过滤 -->
    <div class="list">
      <!-- 布局类型 -->
      <div class="list-type">布局类型
        <img src="https://cn.varmilo.com/keyboardproscenium/img/jiantou1.png" alt=""><br>
        <input type="checkbox" name="" id="check">
        <span class="list-type-test">68键美式布局</span>
      </div>
      <div class="list-type" style="position: absolute;top: 80px;">外壳材质
        <img src="https://cn.varmilo.com/keyboardproscenium/img/jiantou1.png" alt=""><br>
        <input type="checkbox" name="" id="check">
        <span class="list-type-test">68键美式布局</span>
      </div>
      <div class="list-type" style="position: absolute;top: 160px;">客制组件
        <img src="https://cn.varmilo.com/keyboardproscenium/img/jiantou1.png" alt=""><br>
        <input type="checkbox" name="" id="check">
        <span class="list-type-test">68键美式布局</span>
      </div>
      <div class="list-type" style="position: absolute;top: 240px;">其他功能
        <img src="https://cn.varmilo.com/keyboardproscenium/img/jiantou1.png" alt=""><br>
        <input type="checkbox" name="" id="check">
        <span class="list-type-test">68键美式布局</span>
      </div>
      <button class="reset-choice form-control">重置选项</button>
    </div>
    <!-- 商品展示部分 -->
    <div class="list-intro" id="list-intro">
    </div>
    <!-- 熊猫接口渲染 -->
    <script type="text/html" id="listProTemplate">
        {{each list shop}}
          <div class="list-pro">
            <a href="/html/detail.html?id={{shop.id}}" target="_blank">
              <img src="{{shop.image}}" alt="">
              <div class="list-title">{{shop.title.slice(0,15)}}...</div>
              <div class="list-model">现价：{{shop.price}}</div>
              <div class="list-model">原价：{{shop.originPrice}}</div>
              <button class="purchase form-control">了解｜购买</button>
            </a> 
          </div>
        {{/each}}
    </script>

  </main>
  <!-- 头部复用 -->
  <script src="/libs/require/require.min.js" data-main="/js/list"></script>
</body>

</html>